import styles from "./index.module.scss";
import React, { Component } from "react";
// 组件
import Category from "../Category";
// api
import { createBill, listCategory } from "api/bill";
// 插件
import classNames from "classnames";
import { message } from "antd";

export default class AddRecord extends Component {
  constructor(props) {
    super(props);
    this.state = {
      recordType: "支出",
      categories: [],

      // 新增账单
      categoryId: '',
      amount: '',
      remark: "",
      satisfactionLevel: 0,
      billCategoryId: "",
      dealTime: "",

      // 分类管理
      showCategory: false,
    };
  }
  componentDidMount() {
    // 查找分类
    this.handleListCategory();
  }
  showCategory = () => {
    this.setState({
      showCategory: true,
    });
  };
  closeCategory = () => {
    this.setState({
      showCategory: false,
    });
  };
  click(num) {
    const { amount, operator } = this.state;
    if (num === "再记") {
      this.handleCreateBill(false)
    } else if (num === "保存") {
      this.handleCreateBill()
    }
    if (num === "X") {
      this.setState({
        amount: amount.slice(0, amount.length - 1)
      });
    } else {
      this.setState({
        amount: amount + num,
      });
    }
  }
    // 新增账单
    handleCreateBill = async (toClose=true) => {
      const { amount: money, remark, categoryId: billCategoryId, satisfactionLevel, dealTime } =
        this.state;
      const res = await createBill({
        billCategoryId,
        remark,
        money,
        satisfactionLevel,
        dealTime,
      });
      if(res.code == '200') {
        message.success('添加成功')
        if(toClose) {
          this.props.close()
        }
      }
    };

  // 获取账单分类
  handleListCategory = async () => {
    const { accountBookId } = this.props;
    const res = await listCategory({
      accountBookId,
    });
    // console.log("res", res);
    if(res.code == '200') {
      this.setState({
        categories: res.data,
        categoryId: res.data?.[0]?.id ?? ''
      })
    }
  };

  render() {
    const { recordType, categories,categoryId, amount, showCategory } = this.state;
    return (
      <div className={classNames(styles.addRecord)}>
        <div className="toolbar">
          <span className="close" onClick={this.props.close}>
            X
          </span>
          <span className="types"
            onClick={e => {
              // console.log('e.target', e.target.textContent)
              this.setState({
                recordType: e.target.textContent
              })
            }}>
            <span className={classNames('outcome', {'active' : recordType == '支出' })}>支出</span>
            <span className={classNames('income', {'active' : recordType == '收入'} )}>收入</span>
          </span>
          <span className="addCategory" onClick={this.showCategory}>+</span>
        </div>
        <div className="category">
          {
            categories.filter(c => {
              return c.type == (recordType == '支出' ? 1 : 0) 
            }).map(c => {
              return (
                <span 
                  className={classNames("categoryItem", {'active' : c.id == categoryId})} 
                  key={c.id}
                  onClick={() => {
                    this.setState({
                      categoryId: c.id
                    })
                  }}
                  >
                  {c.name}
                </span>
              )
            })
          }
        </div>
        <div className="inputArea">
          <div className="row1">
            <span className="leftInput">
              <span className="tag">#</span>
              <input type="text" placeholder="点此输入备注" />
            </span>
            <span className="amount">{amount}</span>
          </div>
          <div className="btnsRow">
            <span>选择账户</span>
            <span>日常账本</span>
            <span>今天</span>
            <span>图片</span>
            <span>账单标记</span>
          </div>
          <div className="inputBtns">
            <span
              className="num"
              onClick={() => {
                this.click(1);
              }}
            >
              1
            </span>
            <span
              className="num"
              onClick={() => {
                this.click(2);
              }}
            >
              2
            </span>
            <span
              className="num"
              onClick={() => {
                this.click(3);
              }}
            >
              3
            </span>
            <span
              className="num"
              onClick={() => {
                this.click("X");
              }}
            >
              X
            </span>
            <span
              className="num"
              onClick={() => {
                this.click(4);
              }}
            >
              4
            </span>
            <span
              className="num"
              onClick={() => {
                this.click(5);
              }}
            >
              5
            </span>
            <span
              className="num"
              onClick={() => {
                this.click(6);
              }}
            >
              6
            </span>
            <span className="num">{/* - */}</span>
            <span
              className="num"
              onClick={() => {
                this.click(7);
              }}
            >
              7
            </span>
            <span
              className="num"
              onClick={() => {
                this.click(8);
              }}
            >
              8
            </span>
            <span
              className="num"
              onClick={() => {
                this.click(9);
              }}
            >
              9
            </span>
            <span
              className="num"
              // onClick={() => {
              //   this.click("+");
              // }}
            >
              {/* + */}
            </span>
            <span
              className="num"
              onClick={() => {
                this.click("再记");
              }}
            >
              再记
            </span>
            <span
              className="num"
              onClick={() => {
                this.click(0);
              }}
            >
              0
            </span>
            <span
              className="num"
              onClick={() => {
                this.click(".");
              }}
            >
              .
            </span>
            <span
              className="num"
              onClick={() => {
                this.click("保存");
              }}
            >
              保存
            </span>
          </div>
          <div className="satisfactionLevel">☆</div>
        </div>
        {showCategory && <Category defaultType={recordType} categories={categories} close={this.closeCategory}></Category>}
      </div>
    );
  }
}
